<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>员工绩效档案</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/performance-management/appraise-performance-record.css">
    <style>
      
    </style>
  </head>

  <body>
    <div class="title-name">
      <div class="page-header">
        <span class="title-style"></span><h4>员工绩效档案</h4>
      </div>
      <!--  -->
      <div class="serach-reset">
        <!-- 搜索-按名字搜索 -->
        <div class="serach">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="searchInput-name"
              placeholder="名字搜索"
            />
          </div>
        </div>

        <!-- 搜索-按职位搜索 -->
        <div class="serach">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              id="searchInput-position"
              placeholder="职位搜索"
            />
          </div>
        </div>
        <!-- 重置 -->
        <div>
          <button type="button" class="btn btn-default" id="resetBtn">
            重置
          </button>
        </div>

        <!-- 下拉 -->
        <!-- <div class="dropdown">
          <span>部门：</span>
          <button
            type="button"
            class="btn dropdown-toggle"
            id="dropdownMenu1"
            data-toggle="dropdown"
          >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="caret"></span>
          </button>

          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">研发部</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">销售部</a>
            </li>
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="#">人事部</a>
            </li>
          </ul>
        </div> -->
      </div>
    </div>

    <!-- 表格 -->
    <div>
      <div class="table-box">
        <table class="table">
          <thead>
            <tr>
              <th><input type="checkbox" name="" id="checkAll" /></th>
              <th>姓名</th>
              <th>工号</th>
              <th>手机号</th>
              <th>所在部门</th>
              <th>职位</th>
              <th>类型</th>
              <th>考核次数</th>
              <th>考核平均分</th>
              <th>最近一次分数</th>
              <th>最近一次等级</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
              <td><input type="checkbox" name="" id="" /></td>
              <td>lisi</td>
              <td>001</td>
              <td>phone</td>
              <td>研发部</td>
              <td>前端开发</td>
              <td>全职</td>
              <td>2</td>
              <td>90</td>
              <td>90</td>
              <td>A</td>
              <td>
                <button
                  type="button"
                  data-toggle="modal"
                  data-target="#myModal"
                  class="btn btn-success update"
                  data-id="${dataId}"
                >
                  编辑
                </button>
                <button
                  type="button"
                  class="btn btn-danger del"
                  data-id="${dataId}"
                >
                  删除
                </button>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
    </div>

    <!-- 页码 -->
    <div class="pagination-box">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous" id="pre">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="pagination-num"></li>
        <li>
          <a href="#" aria-label="Next" id="next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- 模态框（Modal） -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">员工绩效档案</h4>
          </div>
          <div class="modal-body">
            <p>姓名：<input id="dataName" type="text" /></p>
            <p>工号：<input id="dataJobNum" type="text" /></p>
            <p>手机号：<input id="dataTel" type="text" /></p>
            <p>所在部门：<input id="dataDepartment" type="text" /></p>
            <p>职位：<input id="dataPosition" type="text" /></p>
            <p>类型：<input id="dataType" type="text" /></p>
            <p>考核次数：<input id="dataCount" type="text" /></p>
            <p>考核平均分：<input id="dataAverage" type="text" /></p>
            <p>最近一次分数：<input id="dataRecentScore" type="text" /></p>
            <p>最近一次等级：<input id="dataGrade" type="text" /></p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default cancelBtn"
              data-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary" id="confirm">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>

    <script>
      // 数据
      let data = [
        {
          id: 1,
          name: "张三",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 2,
          name: "可达",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 3,
          name: "嘿嘿",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 4,
          name: "小杰",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 5,
          name: "小康",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 6,
          name: "小i",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 7,
          name: "小黑",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 8,
          name: "小米",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 9,
          name: "格瑞福德",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 10,
          name: "哈哈",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 11,
          name: "李四",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 12,
          name: "一一",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 13,
          name: "飞哥",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 14,
          name: "哈佛",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 15,
          name: "tom",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 16,
          name: "马娜",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 17,
          name: "山峰",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
        {
          id: 18,
          name: "呃呃",
          jobNum: "001",
          tel: 15678645365,
          department: "研发部",
          position: "前端",
          type: "全职",
          count: 2,
          average: 90,
          recentScore: 95,
          grade: "A",
          isComplete: true,
        },
      ];

      // 每页展示5个
      const pageSize = 5;

      // Tbody动态渲染
      function renderTbody(data, currentPage = 1) {
        // 渲染paging
        renderPaging(data, currentPage);
        // 清空页面
        $("tbody").empty();

        const startIndex = pageSize * (currentPage - 1);
        const endIndex = startIndex + pageSize;
        const dataByPaging = data.slice(startIndex, endIndex);
        console.log(
          "startIndex,endIndex,dataByPaging",
          startIndex,
          endIndex,
          dataByPaging
        );
        for (let i = 0; i < dataByPaging.length; i++) {
          const dataId = dataByPaging[i].id;
          const dataName = dataByPaging[i].name;
          const dataJobNum = dataByPaging[i].jobNum;
          const dataTel = dataByPaging[i].tel;
          const dataDepartment = dataByPaging[i].department;
          const dataPosition = dataByPaging[i].position;
          const dataType = dataByPaging[i].type;
          const dataCount = dataByPaging[i].count;
          const dataAverage = dataByPaging[i].average;
          const dataRecentScore = dataByPaging[i].recentScore;
          const dataGrade = dataByPaging[i].grade;
          const isComplete = dataByPaging[i].isComplete;
          console.log("dataName", dataName);

          $("tbody").append(`
                            <tr>
                                <td><input type="checkbox" data-id="${dataId}" /></td>
                                <td>${dataName}</td>
                                <td>${dataJobNum}</td>
                                <td>${dataTel}</td>
                                <td>${dataDepartment}</td>
                                <td>${dataPosition}</td>
                                <td>${dataType}</td>
                                <td>${dataCount}</td>
                                <td>${dataAverage}</td>
                                <td>${dataRecentScore}</td>
                                <td>${dataGrade}</td>
                                <td>
                                    <button type="button" data-toggle="modal" data-target="#myModal"
                                        class="btn btn-success update" data-id="${dataId}">
                                        编辑
                                    </button>
                                    <button type="button" class="btn btn-danger del" data-id="${dataId}">
                                        删除
                                    </button>
                                </td>
                            </tr>
            `);
        }
      }
      renderTbody(data);

      /*
              分页
          */
      function renderPaging(data, currentPage = 1) {
        // 清空
        $(".pagination-num").empty();

        const num = Math.ceil(data.length / pageSize);
        console.log(
          "num",
          num,
          "data.length",
          data.length,
          "currentPage",
          currentPage
        );
        for (let i = 1; i <= num; i++) {
          $(".pagination-num").append(`
                        <a href="#">${i}</a>
                  `);
        }
        $(".pagination-num>a")
          .eq(currentPage - 1)
          .addClass("currentPageColor");
          // 还原全选按钮
          $("#checkAll").prop("checked",false);
      }

      // 处理上一页
      $("#pre").on("click", function (event) {
        // 获取到当前页
        const currentPage = parseInt(
          $(".pagination-num > .currentPageColor").text()
        );
        // 当前页为1  就不能上一页
        if (currentPage === 1) {
          return;
        }

        renderTbody(data, currentPage - 1);
      });

      // 处理下一页
      $("#next").on("click", function (event) {
        // 获取到当前页
        const currentPage = parseInt(
          $(".pagination-num > .currentPageColor").text()
        );

        console.log();
        const max = Math.ceil(data.length / pageSize);
        // 当前页为 max 就不能下一页
        if (currentPage === max) {
          return;
        }

        renderTbody(data, currentPage + 1);
      });
      // 为每一个页码添加点击事件
      $(".pagination-num").on("click", "a", function (event) {
        // 清空所有的样式
        $("#paging > a").removeClass(".pagination-num a");
        $(event.target).addClass("currentPageColor");
        // 获取点击页面
        const currentPage = parseInt($(event.target).text());
        renderTbody(data, currentPage);
      });

      // 刪除
      $("tbody").on("click", ".del", function (event) {
        $("body").append(`
            <div class="modal fade" id="myModal-del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">删除提示</h4>
                        </div>
                        <div class="modal-body">
                            是否删除该条数据？
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default cancelBtn-del" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="button" class="btn btn-primary" id="confirm-del">
                                确认删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `);
        // 显示模态框
        $("#myModal-del").modal("show");
        var id = parseInt(event.target.dataset.id);
        // 确认删除
        $("#myModal-del").on("click", "#confirm-del", (event) => {
          // $(this).parent().parent().remove();

          for (let i = 0; i < data.length; i++) {
            if (data[i].id === id) {
              data.splice(i, 1);
              break;
            }
          }
          // 隐藏模态框
          $("#myModal-del").modal("hide");
          // 基于新的数据重新渲染
          renderTbody(data);
        });
      });

      // 修改
      $("tbody").on("click", ".update", function (event) {
        let id = parseInt($(event.target).attr("data-id"));

        // 找到对应data的数据，然后填到input里
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            $("#dataName").val(data[i].name).text();
            $("#dataJobNum").val(data[i].jobNum).text();
            $("#dataTel").val(data[i].tel).text();
            $("#dataDepartment").val(data[i].department).text();
            $("#dataPosition").val(data[i].position).text();
            $("#dataType").val(data[i].type).text();
            $("#dataCount").val(data[i].count).text();
            $("#dataAverage").val(data[i].average).text();
            $("#dataRecentScore").val(data[i].recentScore).text();
            $("#dataGrade").val(data[i].grade).text();
          }
        }
      });
      // 确认修改
      $("#confirm").on("click", function (event) {
        // 获取input的值
        const name = $("#dataName").val();
        const jobNum = $("#dataJobNum").val();
        const tel = $("#dataTel").val();
        const department = $("#dataDepartment").val();
        const position = $("#dataPosition").val();
        const type = $("#dataType").val();
        const count = $("#dataCount").val();
        const average = $("#dataAverage").val();
        const recentScore = $("#dataRecentScore").val();
        const grade = $("#dataGrade").val();

        // 修改input里面的值
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            data[i].name = name;
            data[i].jobNum = jobNum;
            data[i].tel = tel;
            data[i].department = department;
            data[i].position = position;
            data[i].type = type;
            data[i].count = count;
            data[i].average = average;
            data[i].recentScore = recentScore;
            data[i].grade = grade;
          }
        }
        // 重新渲染
        renderTbody(data);
        // 隐藏
        $("#myModal").modal("hide");
      });

      // 搜索-按名字搜索
      $("#searchInput-name").on("blur", function (event) {
        // 获取searchInput搜索框输入的内容
        let searchValue = $("#searchInput-name").val();
        // 判空
        if (!searchValue) {
          // 清空的时候显示原来的数据
          renderTbody(data);
          return;
        }
        const searchData = [];
        for (let i = 0; i < data.length; i++) {
          // 按名字搜索
          if (data[i].name.includes(searchValue)) {
            searchData.push(data[i]);
          }
        }
        renderTbody(searchData);
      });
      // 搜索-按职位搜索
      $("#searchInput-position").on("blur", function (event) {
        // 获取searchInput搜索框输入的内容
        let searchValue = $("#searchInput-position").val();
        // 判空
        if (!searchValue) {
          // 清空的时候显示原来的数据
          renderTbody(data);
          return;
        }
        const searchData = [];
        for (let i = 0; i < data.length; i++) {
          // 按职位搜索
          if (data[i].position.includes(searchValue)) {
            searchData.push(data[i]);
          }
        }
        renderTbody(searchData);
      });

      // 重置
      $("#resetBtn").on("click", function (event) {
        $("#searchInput-name").val("");
        $("#searchInput-position").val("");
        $("#checkAll").attr("checked", false);
        renderTbody(data);
      });

      // 全选
      $("#checkAll").on("click", function (event) {
        // 判断全选按钮是否被选中checked
        if ($("#checkAll").prop("checked") == true) {
          $("tbody input").each(function (event) {
            $(this).prop("checked", true); // 通过prop()函数设置复选框的选中状态
          });
        } else {
          $("tbody input").each(function (event) {
            //each是循环遍历
            $(this).prop("checked", false);
          });
        }
        renderTbody(currentPage);

        // 还原全选
        $("#checkAll").prop("checked", false);
        // $("#checkAll").attr("checked", '');//不打勾
        // $("#checkAll").attr('checked',);
      });
    </script>
  </body>
</html>
